import { Collapse } from "@arco-design/web-react";
import { IconRight } from "@arco-design/web-react/icon";
import React from "react";
import Title from "./Title";
const CollapseItem = Collapse.Item;

const PriceCard = () => {
  const list = [
    {
      title: "模型服务计费",
      content:
        "各模型存在不同定价与使用限制，开通后使用各模型服务，不同模型的单价不同。支持后付费、预付费等多种付费方式。",
    },
    {
      title: "知识库计费",
      content:
        "知识库当前只支持按量计费，该计费方式为一种后付费方式，即先使用再付费，费用计入账单内，您可以在账单出账后结算费用。",
    },
    {
      title: "联网系列产品计费",
      content:
        "官方插件当前支持按量计费后付费的计费方式，按照实际计算资源使用量付费（此外联网Pro版包含保底消费，详情请咨询业务对接人员）。",
    },
  ];
  return (
    <div>
      <Title>定价与计费</Title>
      <Collapse
        defaultActiveKey={["1"]}
        triggerRegion="header"
        expandIconPosition="right"
        className="bg-none collapseBg"
        bordered={false}
        destroyOnHide={false}
      >
        {list.map(({ title, content }, index) => {
          return (
            <CollapseItem
              style={{ background: "#F8F9FF" }}
              contentStyle={{ background: "#F8F9FF" }}
              header={<div className="pl-4">{title}</div>}
              name={index + 1 + ""}
              key={index}
            >
              <div>{content}</div>
              <div className="text-blue-500">
                了解详情 <IconRight />
              </div>
            </CollapseItem>
          );
        })}
      </Collapse>
    </div>
  );
};
export default PriceCard;
